/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){
		
		Ext.QuickTips.init();

    // turn on validation errors beside the field globally
    	Ext.form.Field.prototype.msgTarget = 'side';

	var paper_id = Ext.urlDecode(window.location.search.substring(1))['id'];
	var ds = new Ext.data.Store({
       	proxy: new Ext.data.HttpProxy({
            url: '../getreviews/?paper_id=' + paper_id
        }),
        reader: new Ext.data.JsonReader({
            root: 'reviews',
            totalProperty: 'totalCount',
            id: 'id'
        }, [
        		{name: 'id'},
        		{name: 'comment'},
        		{name: 'theory_grade'},
            	{name: 'practice_grade'},            
            	{name: 'overview_grade'},
				{name: 'grade'}
        ])
    });
	
	function renderGrade(value, p, r){
		return String.format('{0} - <b>{1}</b>',grade_desc[value], value);
    }
	function renderOveralGrade(value, p, r){
		return String.format('{0} - <b>{1}</b>',o_grade_desc[value], value);
    }
    
    // create the grid
    var grid = new Ext.grid.GridPanel({
        store: ds,
        columns: [
            {header: lbl_theory, width: 135, dataIndex: 'theory_grade', sortable: true, renderer: renderGrade},
            {header: lbl_practice, width: 135, dataIndex: 'practice_grade', sortable: true, renderer: renderGrade},
			{header: lbl_overview, width: 135, dataIndex: 'overview_grade', sortable: false, renderer: renderGrade},
			{header: lbl_grade, width: 135, dataIndex: 'grade', sortable: true, renderer: renderOveralGrade}
        ],
		sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
		viewConfig: {
			forceFit: true
		},
		split: true,
		region: 'north',		
        width:550,
        height:200,
        loadMask:true
    });
	
    var paperTplMarkup = [
		'<h3>' + lbl_comment + ':</h3>',
		'<p>{comment}</p>'
	];
	var paperTpl = new Ext.Template(paperTplMarkup);



	var ct = new Ext.Panel({
		renderTo: 'reviews-grid',
		frame: true,
		title: lbl_reviews,
		width: 550,
		height: 420,
		layout: 'border',
		items: [
			grid,
			{
				id: 'detailPanel',
				region: 'center',
				bodyStyle: {
					background: '#ffffff',
					padding: '7px'
				},
				html: lbl_details
			}
		]
	})
	grid.getSelectionModel().on('rowselect', function(sm, rowIdx, r) {
		var detailPanel = Ext.getCmp('detailPanel');
		paperTpl.overwrite(detailPanel.body, r.data);
	});

    
	ds.load();
		
});
